<template>
  <div class="chaindeal_container">
    <div class="title">
      <img src="../../assets/common/m_title_2.png" alt="">
    </div>
    <div ref="chainDeal" class="chaindeal" />
  </div>

</template>

<script>
export default {
  data() {
    return {
      chainDeal: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      if (this.chainDeal !== null && this.chainDeal !== '' && this.chainDeal !== undefined) {
        this.chainDeal.dispose()// 销毁
      }
      this.chainDeal = this.$echarts.init(this.$refs.chainDeal)
      this.option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          icon: 'circle',
          textStyle: {
            color: '#1FFCE5'
          },
          itemWidth: 8,
          itemHeight: 8

        },
        grid: {
          top: '14%',
          left: '4%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2021-12-01', '2021-12-02', '2021-12-03', '2021-12-04', '2021-12-05', '2021-12-06'],
            axisTick: {
            //   alignWithLabel: true,
              show: false
            },
            axisLine: {
              lineStyle: {

                color: '#1FFCE5'
              }
            },
            axisLabel: {
              fontSize: 12
            }

          }
        ],

        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#1FFCE5'
              }
            },
            axisLabel: {
              fontSize: 12,
              color: '#1FFCE5'

            }
          }
        ],
        series: [
          {
            name: '金鸡湖链',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              // color: '#9661BC'
            },
            // smooth: true,
            symbol: 'none',
            data: [400, 1200, 1500, 1800, 2000, 2300]
          },
          {
            name: '政务资源目录链',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              // color: '#78D3F8'
            },
            // smooth: true,

            symbol: 'none',
            data: [500, 1400, 1600, 1700, 1800, 2400]
          },
          {
            name: '政务业务协作服务链',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              // color: '#78D3F8'
            },
            // smooth: true,

            symbol: 'none',
            data: [500, 1400, 1600, 1700, 1800, 2400]
          }
        ]
      }
      this.chainDeal.setOption(this.option)
    }
  }
}
</script>

<style lang="less" scoped>
.chaindeal_container{
    height: 404px;
    background: url('../../assets/common/m_item_2.png') no-repeat;
    background-size: 100%;
    margin-top: 12px;
    .title{
        padding: 18px 0 14px 34px;
    }
    .chaindeal{
        width: 100%;
        height:361px;
    }
}

</style>
